<script lang="ts" setup>
import { formatPhoneBlack, phoneAddBlank } from '@vc/utils';
import { pageCfg, rules } from '../config';

interface Props {
  account: string;
  placeholder?: string;
  errorMess?: string;
}

const { account, placeholder = pageCfg.phonePlaceholder, errorMess } = defineProps<Props>();

const emit = defineEmits(['update:account', 'update:errorMess']);

const handleInput = (value) => {
  emit('update:account', phoneAddBlank(value));
};

const handleKeyUp = (e) => {
  emit('update:account', formatPhoneBlack(e));
};
</script>

<template>
  <el-form-item prop="account" :rules="rules.phone" :error="errorMess">
    <vc-input class="input mt-10px" maxlength="13" minlength="13" :model-value="account" clearable type="text" prefix-icon="vi-yonghu" :placeholder="placeholder" @input="handleInput" @keyup="handleKeyUp" />
  </el-form-item>
</template>
